<template>
   <div>
       <template>
           <Form-item label="身份证正面" prop="trueOrFalse">
               <div class="demo-upload-list" v-for="item in uploadList">
                   <template v-if="item.status === 'finished'">
                       <img :src="item.url">
                       <div class="demo-upload-list-cover">
                           <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                           <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                       </div>
                   </template>
                   <template v-else>
                       <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                   </template>
               </div>
               <Upload
                       ref="upload"
                       :show-upload-list="false"
                       :on-success="handleSuccess"
                       :format="['jpg','jpeg','png']"
                       :max-size="2048"
                       :on-format-error="handleFormatError"
                       :on-exceeded-size="handleMaxSize"
                       multiple
                       type="drag"
                       action="http://47.99.244.88:8082/merchant/file/upload/2.png"
                       style="display: inline-block;width:58px;">
                   <div style="width: 58px;height:58px;line-height: 58px;">
                       <Icon type="ios-camera" size="20"></Icon>
                   </div>
               </Upload>
               <!--<Modal title="查看图片" v-model="visible"  @on-ok="imageOk"-->
               <!--@on-cancel="imageCancel">-->
               <!--<img :src="imageUrl1" v-if="visible" style="width: 100%">-->
               <!--</Modal>-->
           </Form-item>
       </template>
   </div>
</template>

<script>
    export default {
        name: 'id-true',
        data (){
            return{
                uploadList: '',
            }
        },
        methods: {
            handleView (name) {
                this.imgName = name;
                this.visible = true;
                this.addWhiteModel =false
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = res.data;
                debugger
                this.imageUrl = res.data
                file.name = '7eb99afb9d5f317c912f08b5212fd69a11';
            },
            handleSuccess2 (res, file) {
                file.url = res.data;
                debugger
                this.imageUrl1 = res.data
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            },
        }
    };
</script>

<style scoped>

</style>
